<script setup>
import {onMounted, reactive, ref} from "vue";
import {httpPost} from "@/utils/http.js";
import {useRouter} from "vue-router";
import {isMobile} from "@/utils/libs";
import {checkSession, getSystemInfo} from "@/store/cache";
import {setUserToken} from "@/store/session";
import {showMessageError} from "@/utils/dialog";
import {useSharedStore} from "@/store/sharedata";
import AccountTop from "@/components/AccountTop.vue";
import AccountBg from "@/components/AccountBg.vue";

const router = useRouter()
const store = useSharedStore()
const title = ref('Geek-AI')
const logo = ref('')
const ruleFormRef = ref(null)
// 用户名和密码
const ruleForm = reactive({
  username: import.meta.env.VITE_VUE_APP_USER,
  password: import.meta.env.VITE_VUE_APP_PASS
})
const rules = {
  username: [{ required: true, trigger: "blur", message: "请输入账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
};

onMounted(() => {
  // 获取系统配置
  getSystemInfo().then(res => {
    logo.value = res.data.logo
    title.value = res.data.title
  }).catch(e => {
    showMessageError('获取系统配置失败：' + e.message)
  })

  // 检测是否已经登录
  checkSession().then(() => {
    if (isMobile()) {
      router.push('/mobile')
    } else {
      router.push('/chat')
    }
  }).catch(() => {
  })
})

// 回车触发事件
const handleKeyUp = (e) => {
  if (e.key === 'Enter') {
    login()
  }
}

// 点击登录触发
const login = async () => {
  await ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      doLogin()
    }
  })
}

// 登录逻辑
const doLogin = () => {
  httpPost('api/user/login', {username: ruleForm.username, password: ruleForm.password}).then(res => {
    // 存储用户token
    setUserToken(res.data.token)
    // 设置登录状态
    store.setIsLogin(true)
    if (isMobile()) {
      router.push('/mobile')
    } else {
      router.push('/chat')
    }
  }).catch(e => {
    showMessageError('登录失败：' + e.message)
  })
}

</script>

<template>
  <div class="flex-center loginPage">
    <div class="left">
      <div class="login-box">
        <AccountTop></AccountTop>
        <div class="input-form">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
            <el-form-item label="" prop="username">
              <div class="form-title">账号</div>
              <el-input v-model="ruleForm.username" size="large" placeholder="请输入账号" @keyup="handleKeyUp"/>
            </el-form-item>
            <el-form-item label="" prop="password">
              <div class="flex-between w100">
                <div class="form-title">密码</div>
                <div class="form-forget text-color-primary" @click="router.push('/resetpassword')">忘记密码？</div>
              </div>
              <el-input v-model="ruleForm.password" size="large" placeholder="请输入密码" show-password autocomplete="off" @keyup="handleKeyUp"/>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <account-bg/>
  </div>
</template>

<style scoped lang="stylus">
@import "../assets/css/login.styl"
</style>